<script language="JavaScript" type="text/javascript">
{literal}
	function cancelSubscription (gatewayID, contractID, recurringID, invoiceID)
	{
		$("#messageBox").dialog( 'destroy' ).html({/literal}'{capture name="displayJobProgressBar"}<img style="vertical-align: middle;" src="{$GLOBALS.site_url}/system/ext/jquery/progbar.gif" alt="[[Please, wait ...]]" /> [[Please, wait ...]]{/capture}{$smarty.capture.displayJobProgressBar|escape:'quotes'}'{literal});
		$("#messageBox").dialog({
			width: 300,
			height: 200,
			modal: true,
			title: '',
			buttons: {
				"{/literal}[[Yes]]{literal}": function() {
					var url = '{/literal}{$GLOBALS.site_url}{literal}/cancel-recurring/?gateway='+gatewayID+'&amp;contractId='+contractID+'&amp;subscriptionId='+recurringID;
					if (invoiceID)
						url = url+'&amp;invoiceID='+invoiceID;
					location.href=url;
				},
				"{/literal}[[No]]{literal}": function() {
					$(this).dialog('close');
				}
			}
		}).dialog( 'open' );
		$("#messageBox").html($("#cancelSubscription").html());
		return false;
	}
{/literal}
</script>
{if $cancelRecurringContractId}
	{foreach from=$contracts_info item=contractInfo}
		{if $contractInfo.id == $cancelRecurringContractId}
			{assign var='cancelProductName' value=$contractInfo.product_info.name}
			<p class="message">[[Your recurring subscription for product]] [[{$cancelProductName}]] [[was successfully canceled. The product will not renew automatically after expiration.]]</p>
		{/if}
	{/foreach}
{/if}
{if $smarty.get.subscriptionComplete}
	<p class="message">[[Your payment was successfully completed. Recurring Subscription activation may take some time. Once subscription is activated it will appear in the table below.]]</p>
{/if}

<h1>[[Your Current Products]]</h1>
{if $statistics.listingAmount}
	{foreach from=$statistics.listingAmount item=listingAmount}
        <div class="currentProducts-name">[[{$listingAmount.name}s Left to Post]]:</div>
        <div class="currentProducts-info">{$listingAmount.listingsLeft}</div>
        <div class="clr"></div>
	{/foreach}
{/if}

{if $statistics.avalaibleViews}
	{foreach from=$statistics.avalaibleViews item=avalaibleViews key = listingType}
		{if ($GLOBALS.current_user.group.id != "JobSeeker" && $GLOBALS.current_user.group.id != "Employer") || ($GLOBALS.current_user.group.id == "JobSeeker" && $listingType == 'Job') || ($GLOBALS.current_user.group.id == "Employer" && $listingType == 'Resume')}
            <div class="currentProducts-name">[[{$avalaibleViews.name}s Left to View]]:</div>
            <div class="currentProducts-info">{$avalaibleViews.viewsLeft}</div>
            <div class="clr"></div>
		{/if}
	{/foreach}
{/if}
{if $statistics.avalaibleContactViews}
	{foreach from=$statistics.avalaibleContactViews item=avalaibleContactViews key = listingType}
		{if ($GLOBALS.current_user.group.id != "JobSeeker" && $GLOBALS.current_user.group.id != "Employer") || ($GLOBALS.current_user.group.id == "JobSeeker" && $listingType == 'Job') || ($GLOBALS.current_user.group.id == "Employer" && $listingType == 'Resume')}
            <div class="currentProducts-name">[[{$avalaibleContactViews.name} Contact details left to view]]:</div>
            <div class="currentProducts-info">{$avalaibleContactViews.viewsLeft}</div>
            <div class="clr"></div>
		{/if}
	{/foreach}
{/if}

<div class="clr"><br/></div>
<table cellspacing="0">
	<thead>
		<tr>
			<th class="tableLeft"> </th>
			<th>[[Product]]</th>
			<th><center>[[Price]]</center></th>
			<th><center>[[FormFieldCaptions!Activation Date]]</center></th>
			<th><center>[[Exp / Renewal Date]]</center></th>
			<th>[[Stats]]</th>
			<th><center>[[Status]]</center></th>
			<th class="tableRight"> </th>
		</tr>
	</thead>
	<tbody>
		{foreach from=$contracts_info item=contract}
			<tr class="{cycle values = 'evenrow,oddrow' advance=true}">
				<td></td>
				<td valign="top">
					<strong>[[{$contract.product_info.name}]]</strong>
					<div style="font-size: 11px;">
						{if $contract.listingAmount}
							{assign var=numberOfListings value=0}
							{foreach from=$contract.listingAmount item=amountInfo key=listingType}
								{if $amountInfo.count == 'unlimited' || $numberOfListings === 'unlimited'}
									{assign var=numberOfListings value='unlimited'}
								{else}
									{assign var=numberOfListings value=$numberOfListings+$amountInfo.count}
								{/if}
							{/foreach}
							<div>[[Postings]]: {$numberOfListings}</div> 
						{/if}
						{if $contract.extra_info.pricing_type== 'period'}
							[[Period]]: [[{$contract.extra_info.expiration_period|capitalize}]]<br />
						{elseif $contract.extra_info.expiration_period}
							[[Period]]: {$contract.extra_info.expiration_period} [[days]]<br />
						{/if}
						{if $contract.avalaibleViews}
							{foreach from=$contract.avalaibleViews item=views key=listingType}
								{if $views.count}<div>[[{$views.name} Views]]: {$views.count}</div> {/if}
							{/foreach}
						{/if}
						{if $contract.avalaibleContactViews}
							{assign var=contactDetailsViews value=0}
							{foreach from=$contract.avalaibleContactViews item=contactViews key=listingType}
								{if $contactViews.count == 'unlimited' || $contactDetailsViews === 'unlimited'}
									{assign var=contactDetailsViews value='unlimited'}
								{else}
									{assign var=contactDetailsViews value=$contactDetailsViews+$contactViews.count}
								{/if}
							{/foreach}
							<div>[[Contact Detail Views]]: {$contactDetailsViews}</div> 
						{/if}
					</div>
				</td>
				<td valign="top"><center>{$GLOBALS.settings.transaction_currency}{if $contract.price}{$contract.price}{else}0{/if}</center></td>
				<td valign="top"><center>{tr type="date"}{$contract.creation_date}{/tr}</center></td>
				<td valign="top">
                    <center>
                        {if $contract.expired_date}{tr type="date"}{$contract.expired_date}{/tr}{else}[[unlimited]]{/if}
                        {if $contract.recurring_id}
                            <br/><a href="{$GLOBALS.site_url}/cancel-recurring/" class="remove" style="font-size: 11px !important;" onClick="cancelSubscription('{$contract.gateway_id}', '{$contract.id}', '{$contract.recurring_id}', '{$contract.invoice_id}'); return false;" />[[Cancel Subscription]]</a>
                            <div id="cancelSubscription" style="display: none">[[Are you sure you want to cancel this subscription?]]</div>
                        {/if}
                    </center>
				<td valign="top">
					{if $contract.listingAmount}
						{foreach from=$contract.listingAmount item=listingAmount}
							<div>[[{$listingAmount.name}s Left to Post]]: 
							{if $listingAmount.listingsLeft!=''}
							[[{$listingAmount.listingsLeft}]]
							{else}
							0	
							{/if}
							</div>
						{/foreach}
					{/if}
					{if $contract.avalaibleViews}
						{foreach from=$contract.avalaibleViews item=avalaibleViews}
							<div>[[{$avalaibleViews.name}s Left to View]]: [[{$avalaibleViews.viewsLeft}]]</div>
						{/foreach}
					{/if}
					{if $contract.avalaibleContactViews}
						{foreach from=$contract.avalaibleContactViews item=avalaibleContactViews}
							<div>[[{$avalaibleContactViews.name} Contact details left to view]]: [[{$avalaibleContactViews.viewsLeft}]]</div>
						{/foreach}
					{/if}
				</td>
				<td valign="top"><center>[[{$contract.status|capitalize}]]</center></td>
				<td></td>
			</tr>
		{/foreach}
	</tbody>
</table>


<form method='post' action=" ">
 
<h1>Purchase Now</h1>
Please select at least one item. Click on item to view description.
<br>

{literal}
<style>
.divcontent table{width:650px;background:#F5F5F4;padding:5px;border:1px;border-spacing:3px;}
.divcontent thead {background-image:none;background-color:#CDCDCD;color:black;}
.divcontent tr {height:25px;}
.divcontent span{width:400px;}
.divpay{text-align:left;}
.divpay span{text-align:right;width:140px;display:inline-block;}
</style>
{/literal}

<div class='divcontent'>

<table name='plan'>
<thead>
<th>ID</th>
<th width="400px"><span>Name</span></th>
<th><label>Price</label></th>
<th><label>Quantity</label></th>
</thead>
{if $availableProducts != false}
	{foreach from=$availableProducts item=product key=id name=pro}
	<tr>
	<td>[[{$id+1}]]</td>
	<td>
	<span class='m_des' id='m_[[{$id}]]' style="text-decoration:underline;cursor:pointer;">
	[[{$product.name}]]
	</span>
	<br>
	<div id='m_[[{$id}]]_des' class='div_tog' style='color:gray;'>
	[[{$product.short_description}]]
	</div>
	</td>
	
	<td>
	<label>{if !$product.price}[[Free]]{else}[[{$product.price}]]{/if}</label>
	</td>
	
	<td>
	<input style="width:60px;" name="plan_[[{$id}]]" type="text" class='quantity'  value='0' />
	</td>
	</tr> 
	 
	{/foreach}
{/if}
</table>

<b><h3  style='color:red;font-size: 18px;'>Total Price: $<span id='sp_price'>0</span></h3></b>
<input type='hidden' name='nousecoupon' >
<input type='hidden' name='totalprice' > 

<hr/>
 
<h3>Discount Code</h3> 
Enter discount code:<input type='text' name='coupon_code' style='width:100px'/>
<input type='button' name='sub_coupon' value='Submit coupon'/>

<span style='color:red;font-size:14px;font-weight:bolder;' name='showcoupon'></span>
<input type='text' style='display:none;' name='ctype' />
<input type='text' style='display:none;' name='cvalue' value='0'/>

<br>
<br>
<input type='button' name='calculcate' style="display:none;" value='Calculcate'><br>
<br>
<h2><input type='button' name='paybtn' title='click to expand' style='width:20px;height:20px;border-radius:5px;' value='-'/> Payment system</h2>
<br><font>Pay online with your credit card or choose to have a mailed invoice 'due upon receipt'.</font><br><br>
<div class='divpay'>

<input type="radio" checked='checked' name="pay" value="1" />Credit Card
{if $GLOBALS.current_user.group.id != "JobSeeker"}
<input type="radio"  name="pay" value="2" />Invoice
{/if}

<h3>Billing Information</h3>
<font>Billing information must match the credit card information.</font><br><br>
<span>Name:</span><input name='username' type='text' value='{$user->details->properties.ContactName->value}' style='width:150px' /><br>
<span>Street Address:</span><input name='address' type='text' value='{$user->details->properties.Address->value}' style='width:300px'/><br>
<span>City:</span><input name='city' type='text' value='{$user->details->properties.City->value}' style='width:150px'/><br>
<span>State:</span><input name='state' type='text' value='{$user->details->properties.State->value}' style='width:150px'/><br>
<span>Zip:</span><input name='zip' type='text' value='{$user->details->properties.ZipCode->value}' style='width:80px'/><br>

<div id='div_credit'>
<div style='float:left;width:300px;'>
<h3>Credit Card Information</h3>
<span>Credit Card Number:</span><input name='creditnumber' type='text' value='' style='width:150px'/><br>
<span>Expiration Date:</span>
<select name="Card_Exp_Month">
  <option value="01"> 01 </option>
  <option value="02"> 02 </option>
  <option value="03"> 03 </option>
  <option value="04"> 04 </option>
  <option value="05"> 05 </option>
  <option value="06"> 06 </option>
  <option value="07"> 07 </option>
  <option value="08"> 08 </option>
  <option value="09"> 09 </option>
  <option value="10"> 10 </option>
  <option value="11"> 11 </option>
  <option value="12"> 12 </option>
</select>
<select name="Card_Exp_Year">
  <option value="2012">
  2012                                    </option><option value="2013">
  2013                                    </option><option value="2014">
  2014                                    </option><option value="2015">
  2015                                    </option><option value="2016">
  2016                                    </option><option value="2017">
  2017                                    </option><option value="2018">
  2018                                    </option><option value="2019">
  2019                                    </option><option value="2020">
  2020                                    </option><option value="2021">
  2021                                    </option>
</select>

<br>
<span>CVV2:</span><input name='creditcvv' type='text' value='' style='width:50px'/><br>
<span>Cardholder's Name:</span><input name='creditname' type='text' value='' style='width:150px'/><br>
<span>Issuer of card:</span>
<select name="Card_Issuer">
<option value="Visa">Visa</option>
<option value="MC">Master Card</option>
<option value="Disc">Discover</option>
<option value="AmEx">American Express</option>                
</select>
</div>

<div style="width:300px; float:left; text-align:center;">
	<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:0px; height:21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmotorcycleindustryjobs&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=21&amp;appId=180499568670514"></iframe>
	<br><br><br><br>
    <span id="siteseal">
    <img width="132" height="90" src="/templates/_system/main/images/cc.jpg">
     
	<br><br>
	<script src="https://seal.starfieldtech.com/getSeal?sealID=Gl69B4f0TJAIyP5HtPAA28dL17Orlql3biDmhjWvPt2yS9IjmzIA6dLIC5" type="text/javascript"></script>
</div>

</div>
<br>

<div id='div_invoice'>
<h3>Invoice Infomation</h3>
<span>Purchase Order Number: </span>
<input name="invoicenumber" type='text' style='width:150px'/><span style='color:red;font-size:20px;text-align:left;'>*</span>
</div>
<br>

<div  style='clear:left;'>
<input type='submit' value='Proceed' name='btnsub'>
</div>

</div>  


</div>
</form>

{literal}
<script>
$('input[name=sub_coupon]').live('click',function(){
    var coupon=$('input[name=coupon_code]').val();
    if(coupon=='')
    {
        alert('Please enter the coupon code first.');
    }
    else
    {
        $.ajax({
            url:'http://'+location.host+'/ajax/?action=check&code='+coupon,
            type:'get',
            datatype:'json',
            success:function(data){
					var obj = jQuery.parseJSON(data);                    
					if(obj.e=='error')
					{
						$('span[name=showcoupon]').text('The code is not valid.');
					}else{
						var info = jQuery.parseJSON(obj.data)[0];
						if(info.type=='%'){
							$('span[name=showcoupon]').text('The price can be reduced '+info.value+'%');
							$('input[name=ctype]').val('%');
							$('input[name=cvalue]').val(info.value);
						}else{
							$('span[name=showcoupon]').text('The price can be reduced $'+info.value+'');
							$('input[name=ctype]').val('$');
							$('input[name=cvalue]').val(info.value);
						} compute();
					}					
                },
           error:function(){
           		alert('transfer error.');
           }           
        });
    }
});

$('input[class=quantity]').live('keyup',function(){
  var str="0123456789";  
  if ((str.indexOf($(this).val())!=-1&&$(this).val()!='01')||$(this).val()>9)
  { 
	  var pri = $(this).val();
	  if(pri.indexOf('0')==0&&pri.length>1)
	  {
	  	pri=pri.substr(1,pri.length);
	  	$(this).val(pri);
	  }
    
  	var total=0;    
	$("table[name=plan] tr:gt(0)").each(function(){
	    var count = $(this).find('input').val();
	    if(count==''){return;}
	    var price=$(this).find('label').text();
	    price=price.replace(',','');
	    if(price=='Free')
	    {
	    	price=0;
	    }
	    total+=parseInt(count)*parseFloat(price);
	});
	total = parseFloat(total).toFixed(2);
	$('#sp_price').text(total);
	$('input[name=totalprice]').val(total);
	$("input[name=nousecoupon]").val(total);
  }
  else
  {
      $(this).val("0"); 
  } 
});

function compute(){	 
	var total=$('input[name=nousecoupon]').val();
	var per=$('input[name=cvalue]').val();
	if(per!=0){ 
		if($('input[name=ctype]').val()=='%'&per!=0)
		{		
			total=total - total*per/100;
		}
		else{
			total=total - per;	
		}
		total = parseFloat(total).toFixed(2);
		if(total>0){
		$('#sp_price').text(total);
		$('input[name=totalprice]').val(total);
		}
	}	 
}

$('input[name=pay]').live('click',function(){
	if($(this).val()==1)
	{
		$('#div_invoice').hide();
		$('#div_credit').show();
	}
	else{
		$('#div_credit').hide();
		$('#div_invoice').show();
	}
});

$("input[name=paybtn]").live("click",function(){
    $('.divpay').toggle("slow");
    if($("input[name=paybtn]").val()=='+')
    {
    	$("input[name=paybtn]").val('-');
    }else{
    	$("input[name=paybtn]").val('+');
    }
}); 

$('#div_credit').show();
$('#div_invoice').hide();
//$('.divpay').toggle("slow"); 

$("span[class=m_des]").live("click",function(){
	var id = $(this).attr('id');
	$("#"+id+"_des").toggle("slow");
});

$('div[class=div_tog]').toggle();

$('input[name=btnsub]').live("click",function(){ 
    if($('input[name=pay]:checked').val()=='2')
    {
        if($('input[name=invoicenumber]').val()=="")
        {
            alert('please enter order number.');
            return false;
        }
    }
});

</script>
{/literal}
